<template>
  <view class="user-info-card">
    <image :src="user.avatar || '/static/default-avatar.png'" class="avatar" mode="aspectFill" />
    <view class="info-content">
      <text class="nickname">{{ user.nickname }}</text>
      <text class="account">账号: {{ user.account }}</text>
      <text class="gender">性别: {{ user.gender === 1 ? '男' : '女' }}</text>
      <text class="location">位置: {{ user.location }}</text>
    </view>
    <button class="add-btn" @click="addMember">添加</button>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const emit = defineEmits(['add-member']);

const props = defineProps({
  user: {
    type: Object,
    required: true,
    default: () => ({
      avatar: '/static/images/ai.jpg',
      nickname: '张三',
      account: 'zhangsan123', 
      gender: 1,
      location: '上海市浦东新区'
    })
  }
});

const addMember = () => {
  uni.request({
    url: 'http://localhost:8081/family/member/add',
    method: 'POST',
    data: {
      account: props.user.account
    },
    success: (res) => {
      if(res.data.code === '200') {
        uni.showToast({
          title: '添加成功',
          icon: 'success'
        });
        emit('add-member', props.user.account);
      } else {
        uni.showToast({
          title: res.data.message || '添加失败',
          icon: 'none'
        });
      }
    },
    fail: () => {
      uni.showToast({
        title: '请求失败',
        icon: 'none'
      });
    }
  });
}
</script>

<style scoped>
.user-info-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.info-content {
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.account, .gender, .location {
  font-size: 28rpx;
  color: #666;
}

.add-btn {
  background: linear-gradient(45deg, #ff9a44, #ff6b6b);
  color: #fff;
  border-radius: 8rpx;
  padding: 0 20rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  margin-left: auto;
}
</style> 